<template>
  <div class="content-container">
    <!-- 面包屑导航 -->
    <!-- <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      :breadcrumb="{ routes }"
    /> -->
    <!-- 面包屑导航 -->
    <!-- 筛选表单 -->
    <a-card>
      <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="状态">
          <a-radio-group name="radioGroup" v-model:value="form.status">
            <a-radio :value="item.status" v-for="(item, i) in types" :key="i"
              >{{ item.name }}
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="频道">
          <a-select
            v-model:value="form.channelId"
            placeholder="please select your zone"
          >
            <a-select-option
              :value="item.id"
              v-for="item in channels"
              :key="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="日期">
          <!-- :format="dateFormatLit" -->
          <a-range-picker
            v-model:value="form.rangeData"
            valueFormat="YYYY-MM-DD"
          >
            <template v-slot:dateRender="{ current }">
              <div class="ant-calendar-date">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" :loading="btnLoading" @click="onSearch">
            查询
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 筛选表单 -->

    <!-- 表格 -->
    <a-card class="table">
      <a-table
        :pagination="pagination"
        @change="handleTableChange"
        :columns="columns"
        bordered
        :data-source="tableData"
        :rowKey="tableData => tableData.id"
      >
        <template #thumb="{cover}">
          <!-- <img :src="cover.images[0]" alt="" /> -->
          {{ cover }}
        </template>
        <!-- 状态 -->
        <template #status="{record}">
          <a-tag :color="status[record.status].color">
            {{ status[record.status].name }}
          </a-tag>
        </template>
        <template #setting="{record}">
          <a-button @click="handleDel(record.id)" size="small" type="danger">
            删除
          </a-button>
          <a-button
            @click="handleEdit(record.id)"
            size="small"
            style="marginLeft:20px"
            type="primary"
          >
            编辑
          </a-button>
        </template>
      </a-table>
      <div class="loading" v-if="loading">
        <a-spin size="large" />
      </div>
    </a-card>
    <!-- 表格 -->
  </div>
</template>

<script>
import { columns, types, routes, status } from './data'
import { reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getArticles, getArticleChannels, delArticles } from '@/api/articles'
export default {
  name: 'Content',
  setup() {
    const labelCol = { span: 2 }
    const wrapperCol = { span: 14 }

    const router = useRouter()
    const state = reactive({
      // 搜索状态
      form: {
        status: null,
        channelId: null,
        rangeData: []
      },
      loading: true,
      btnLoading: false,
      startTime: '',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      channels: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: total => `共有 ${total} 条数据`
      }
    })

    const getArticlesData = async current => {
      const params = {}
      params.page = current || 1
      params.status = state.form.status
      params.channel_id = state.form.channelId
      params.begin_pubdate = state.form.rangeData[0]
      params.end_pubdate = state.form.rangeData[1]
      const res = await getArticles(params)
      hideBtnLoading()
      hidePageLoading()
      /* eslint-disable */
      const { page, total_count, results } = res.data
      state.pagination.total = total_count
      state.pagination.current = page
      state.tableData = results
    }

    // 获取文章频道
    const getArticleChannelsData = async () => {
      const res = await getArticleChannels()
      const { channels } = res.data
      state.channels = channels || []
    }

    const onSearch = () => {
      openBtnLoading()
      openPageLoading()
      getArticlesData()
    }

    // 翻页
    const handleTableChange = pagination => {
      const { current } = pagination
      getArticlesData(current)
    }

    const handleEdit = id => {
      router.push(`/publish?id${id}`)
    }

    const handleDel = async id => {
      const res = await delArticles(id.toString())
      console.log(res, 11)
    }

    const openPageLoading = () => {
      state.loading = true
    }
    const hidePageLoading = () => {
      state.loading = false
    }
    const openBtnLoading = () => {
      state.btnLoading = true
    }
    const hideBtnLoading = () => {
      state.btnLoading = false
    }

    onMounted(() => {
      getArticlesData()
      getArticleChannelsData()
    })
    return {
      ...toRefs(state),
      types,
      routes,
      status,
      columns,
      labelCol,
      wrapperCol,
      onSearch,
      handleDel,
      handleEdit,
      handleTableChange,
      getArticlesData
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  position: relative;
}
.loading {
  z-index: 99;
  // position: fixed;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
